<template>
  <el-row style="margin-bottom: 20px;">
    <el-col :span="12" style="font-size: 18px; font-weight: bold">我的收藏</el-col>
  </el-row>
  <div>
    <ul >
      <li v-for="(collect,index) in collectList.list" :key="index">
        <div class="product-container">
            <div class="left-section">
             <div class="img">  <el-image
                :src="`${SERVER_ADDR}/goods/pic/${collect.goods.picList[0].url}`"
                style="height: 100px; width: 200px"
                fit="contain"
             />
             </div>
            </div>

             <div>
               <div>商品名称:{{collect.goods.name}}</div>
                <div>版本：{{collect.goods.version}}</div>
               <div>颜色：{{collect.goods.color}}</div>
             </div>



          <div class="score">
            <el-rate
                v-model="collect.goods.score"
                disabled
                show-score
                text-color="#ff6800"
                :colors="['#ff6800','#ff6800','#ff6800']"
                score-template="{value} 分"
            />
          </div>
            <div class="right-section">
              <el-popconfirm
                title="你确定要取消收藏该商品吗？"
                confirm-button-text="确认"
                cancel-button-text="取消"
                width="200px"
                @confirm="collectout(collect.id)"
               >
               <template #reference>
                <el-button size="small">取消收藏</el-button>
               </template>
             </el-popconfirm>
           </div>
        </div>
      </li>
      <el-row class="row-bg" justify="center" style="margin-top: 20px;">
        <el-pagination background layout="prev, pager, next"
                       v-model:current-page="pageInfo.pageNum"
                       :page-count="pageInfo.pages"
                       @update:current-page="selectAll" />
      </el-row>
    </ul>
  </div>
</template>

<script setup>
import collectApi from "@/api/collectApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
//用户的收藏信息
const collectList = ref([]);
//地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)
//分页信息
const pageInfo=ref({
  pages:0,
  pageSize:0,
  pageNum:0
});

//取消收藏
function  collectout(id){
  collectApi.delete(id)
      .then(resp =>{
        if (resp.code == 10000){
          ElMessage.success(resp.msg);
          selectAll(1);
        }else {
          ElMessage.error(resp.msg);
        }
      })
}
//分页查询
function  selectAll(pageNum){
 collectApi.selectAll(pageNum)
      .then(resp=>{
        collectList.value=resp.data
        pageInfo.value=resp.data
      })
}
selectAll(1);
</script>
<style scoped>

.product-container {
  display: flex;
  align-items: center;
  border: 1px solid #e8e8e8;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.left-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}
.img {
  margin-bottom: 10px;
}
.product-details {
  text-align: center;
}
.product-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.product-version {
  font-size: 14px;
  color: #666;
}
.product-color {
  font-size: 14px;
  color: #666;
}
.score {
  margin-left: 20px;
  align-self: center;
}
.right-section {
  margin-left: 20px;
  align-self: center;
}
.row-bg {
  background-color: #f5f5f5;
}
.el-pagination {
  padding: 10px;
  border-radius: 5px;
}
/* 应用主题色 */
.product-name,
.product-version,
.product-color {
  color: #333;
  transition: color 0.3s ease;
}
.product-container:hover.product-name,
.product-container:hover.product-version,
.product-container:hover.product-color {
  color: #ff6800;
}
.el-button:hover {
  background-color: #ff6800;
  border-color: #ff6800;
  color: #fff;
}
.el-popconfirm:hover.el-button--text {
  color: #ff6800;
}
.el-rate.el-icon-star-on {
  color: #ff6800;
}
</style>